<!DOCTYPE html>
<html>
<head>
<title>Fig. 1.39</title>
</head>
<body>
<canvas id="canvas" width="600" height="450"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Style to mimic the hand-drawn sketch
ctx.strokeStyle = 'black';
ctx.lineWidth = 2.5;
ctx.font = 'bold 20px Times New Roman';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.textBaseline = 'top';

// --- Define coordinate system and parameters ---
const O_x = 150; // x-coordinate of the lens center
const O_y = 220; // y-coordinate of the principal axis
const l = 80;    // Scale factor for distance units
const h = 80;    // Height of the image

// --- Draw Principal Axis ---
ctx.beginPath();
ctx.moveTo(10, O_y);
ctx.lineTo(580, O_y);
ctx.stroke();

// Arrowhead for the axis
ctx.beginPath();
ctx.moveTo(580, O_y);
ctx.lineTo(570, O_y - 6);
ctx.moveTo(580, O_y);
ctx.lineTo(570, O_y + 6);
ctx.stroke();

// Ticks and labels on the axis
for (let i = 1; i <= 4; i++) {
    const x = O_x + i * l;
    ctx.beginPath();
    ctx.moveTo(x, O_y - 6);
    ctx.lineTo(x, O_y + 6);
    ctx.stroke();
    ctx.fillText(i, x, O_y + 10);
}

// Axis label 'd/l'
ctx.fillText('d/l', O_x + 4.7 * l, O_y + 10);


// --- Draw Lens ---
const lensHeight = 200;
const lensWidth = 20;
ctx.beginPath();
ctx.moveTo(O_x, O_y - lensHeight / 2);
ctx.quadraticCurveTo(O_x + lensWidth * 2, O_y, O_x, O_y + lensHeight / 2);
ctx.quadraticCurveTo(O_x - lensWidth * 2, O_y, O_x, O_y - lensHeight / 2);
ctx.stroke();

// Label 'O' for lens center
ctx.fillText('O', O_x, O_y - 30);

// --- Draw Image ---
const img_x = O_x + 4 * l;
const img_y_base = O_y;
const img_y_tip = O_y - h;
const I = { x: img_x, y: img_y_tip };

// Image arrow shaft
ctx.beginPath();
ctx.moveTo(img_x, img_y_base);
ctx.lineTo(img_x, img_y_tip);
ctx.stroke();

// Image arrowhead
ctx.beginPath();
ctx.moveTo(I.x, I.y);
ctx.lineTo(I.x - 6, I.y + 12);
ctx.moveTo(I.x, I.y);
ctx.lineTo(I.x + 6, I.y + 12);
ctx.stroke();

// Label 'h' for image height
ctx.save();
ctx.textAlign = 'left';
ctx.fillText('h', img_x + 10, img_y_base - h / 2 - 10);
ctx.restore();


// --- Draw Light Rays ---

// Ray 1: Passes through the optical center 'O'.
// We extend this line back from the image 'I' through 'O' to a starting point on the left.
const ray1_slope = (I.y - O_y) / (I.x - O_x);
const ray1_start_x = 20;
const ray1_start_y = O_y + ray1_slope * (ray1_start_x - O_x);
ctx.beginPath();
ctx.moveTo(ray1_start_x, ray1_start_y);
ctx.lineTo(I.x, I.y);
ctx.stroke();

// Ray 2: Starts from below the lens and crosses the axis at d=2l.
// To replicate the drawing, we find the starting point on the lens (at x=O_x)
// such that the line to the image tip 'I' passes through the point (O_x + 2l, O_y).
const cross_point = { x: O_x + 2 * l, y: O_y };
const ray2_slope = (I.y - cross_point.y) / (I.x - cross_point.x);
const ray2_start_y = cross_point.y + ray2_slope * (O_x - cross_point.x);
const ray2_start_point = { x: O_x, y: ray2_start_y };

// Draw the second ray from its starting point on the lens plane to the image tip.
ctx.beginPath();
ctx.moveTo(ray2_start_point.x, ray2_start_point.y);
ctx.lineTo(I.x, I.y);
ctx.stroke();

// The diagram shows an incoming ray for ray 2. We'll represent this as starting from the same
// point as ray 1 and hitting the lens at the start of the refracted ray 2.
ctx.beginPath();
ctx.moveTo(ray1_start_x, ray1_start_y);
ctx.lineTo(ray2_start_point.x, ray2_start_point.y);
ctx.stroke();

// --- Draw Labels below the lens ---

// The diagram shows a horizontal line segment and the label 'L1'.
const line_y_pos = O_y + lensHeight / 2 + 30;
ctx.beginPath();
ctx.moveTo(O_x - 50, line_y_pos);
ctx.lineTo(O_x, line_y_pos);
ctx.stroke();
ctx.fillText('L₁', O_x, line_y_pos + 5);


// --- Draw Figure Caption ---
ctx.font = 'bold 20px Times New Roman';
ctx.fillText('Fig. 1.39', canvas.width / 2, 410);

</script>
</body>
</html>